<template>
    <div class="toolbar">
        <div
            v-for="(option, index) in state.options"
            :key="index"
            class="toolbar-item">
            <div
                :class="['left', option.searchPosition === 'left' ? 'flex' : '']"
                :style="{flex: option.searchPosition === 'right' ? 'none' : 1}"
                v-if="option && option.left && option.left.length">
                <div
                    v-for="(item, index) in option.left"
                    :key="index"
                    :style="{width: ['button', 'button-group'].includes(item.ui) ? 'auto' : item.width || '20%'}"
                    class="item">
                    <div style="display: flex;align-items: center;">
                        <div
                            v-if="!['button', 'button-group'].includes(item.ui) && item.label"
                            style="font-size: 13px;color: #343434;margin-right: 10px;font-weight: bold;">
                            {{ item.label }}:
                        </div>
                        <div style="flex: 1;">
                            <ZUI :item="item" :form="form" :initData="initData" @event="handleEvent"></ZUI>
                        </div>
                    </div>
                </div>
            </div>
            <div
            :class="['right', option.searchPosition === 'right' ? 'flex' : '']"
                v-if="option && option.right && option.right.length">
                <div
                    v-for="(item, index) in option.right"
                    :key="index"
                    :style="{width: ['button', 'button-group'].includes(item.ui) ? 'auto' : item.width || '20%'}"
                    class="item">
                    <div style="display: flex;align-items: center;">
                        <div
                            v-if="!['button', 'button-group'].includes(item.ui) && item.label"
                            style="font-size: 13px;color: #343434;margin-right: 10px;font-weight: bold;">
                            {{ item.label }}:
                        </div>
                        <div style="flex: 1;">
                            <ZUI :item="item" :form="form" :initData="initData" @event="handleEvent"></ZUI>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, type PropType } from 'vue'
import ZUI from './UI.vue'
const props = defineProps({
    options: {
        type: Array as PropType <any[]>,
        default: () => []
    },
    form: {
        type: Object,
        default: () => ({})
    },
    initData: {
        type: Object,
        default: () => ({})
    }
})

const state = reactive({
    options: props.options // 添加响应式数据，可实现动态改变属性
})

const emits = defineEmits(['event'])
const handleEvent = (val: any) => emits('event', val)
</script>

<style lang="scss" scoped>
.toolbar{
    &-item{
        background-color: #fff;
        padding: calc(var(--zui-padding) - 5px);
        margin-bottom: 5px;
        border-radius: var(--el-border-radius-base);
        display: flex;
        // &:last-child{
        //     border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
        //     margin-bottom: 0px;
        //     border-bottom: 1px solid #e5e5e5;
        // }
        .left,
        .right{
            display: flex;
            align-items: center;
            &.flex{
                flex: 1;
            }
            .item{
                padding-right: calc(var(--zui-padding) - 5px);
                &:last-child{
                    padding-right: 0;
                }
            }
            :deep(.el-tabs__header) {
                margin-bottom: 0;
            }
            :deep(.el-tabs) {
                --el-tabs-header-height: 32px;
            }
        }
        .left{
        }
        .right{
            justify-content: flex-end;
        }
    }
}
</style>